<div class="modal-resource-action">
  <div class="modal-body">
    <h4>Group Service to {{service.metadata.name}}</h4>
    <div class="help-block mar-bottom-md">
      Choose a service that <strong>{{service.metadata.name}}</strong> uses. This groups the
      services together in the overview.
    </div>
    <form>
      <label class="sr-only" for="childService">Service:</label>
      <ui-select ng-model="link.selectedService"
                 theme="bootstrap"
                 title="Choose a service">
        <ui-select-match placeholder="Choose a service...">{{$select.selected.metadata.name}}</ui-select-match>
        <ui-select-choices repeat="service in options | toArray | filter : { metadata: { name: $select.search } } | orderBy : 'metadata.name'">
          <div ng-bind-html="service.metadata.name | highlight : $select.search"></div>
        </ui-select-choices>
      </ui-select>
    </form>
  </div>
  <div class="modal-footer">
      <button class="btn btn-lg btn-primary" type="button" ng-click="link()" ng-disabled="!link.selectedService">OK</button>
      <button class="btn btn-lg btn-default" type="button" ng-click="cancel()">Cancel</button>
  </div>
</div>
